<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>

<body>
    <h1>用户登录</h1>
    用户名：<input name="userName" type="text" id="userName"><br>
    密码：<input name="password" type="password" id="password"><br>
    <input type="button" value="登录" onclick="login()">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        function login() {
            //ajax实现 （重点掌握）
            //ajax语法 $.ajax()  括号里面是对象 用{}表示
            $.ajax({
                url:"/user/login",
                type:"post",
                data:{
                    "userName":$("#userName").val(),
                    "password":$("#password").val()
                },
                //success 表示的是后端接口是成功还是失败
                success:function(result){
                    //请求成功时执行
                    //返回true 页面跳转
                    if(result){
                        location.href = "index.html";
                    }else{
                        //密码错误
                        alert("密码错误！！！");
                    }
                }
            });
        }

    </script>
</body>

</html>